import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects

Item {

    width: buttonWidth
    height: buttonHeight

    property real buttonWidth       // 按钮宽度
    property real buttonHeight      // 按钮高度
    property string buttonText      // 按钮文本
    property url imagePath          // 图片路径
    property bool coloroverlayEnable: false //  颜色遮罩初始化
    property string backColor: "white"       // 按钮背景颜色

    signal buttonClicked();         // 按钮点击信号

    Rectangle{      // 电源按钮
        id:iconBack
        width: buttonWidth
        height: buttonHeight
        anchors.centerIn: parent
        color: backColor

        Image {
            id: icon
            width: 40
            height: 40
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.horizontalCenter: parent.horizontalCenter
            source: imagePath
            visible: !coloroverlayEnable
        }

        ColorOverlay{
            id:iconOverlay
            anchors.fill: icon
            source: icon
            visible: coloroverlayEnable
            color: iconOverlay.flag ? "black" : "green"
            property bool flag: false
        }

        Text{
            anchors.top: icon.bottom
            anchors.topMargin: 5
            anchors.horizontalCenter: icon.horizontalCenter
            font.pixelSize: 20
            text: qsTr(buttonText)
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {
                console.log("按钮触发 ！！")
                buttonClicked()
            }

        }

    }

}
